import React, { Component } from 'react';
import {
	StyleSheet, View, Text, PixelRatio,
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';

const scale = GLOBAL.SCALE;
export class EchartsComponent extends Component {
	constructor(props) {
		super(props);
		this.state = {
			selectIndex: 0
		}
	}
	_tabFn = (selectIndex) => {
		this.setState({
			selectIndex
		})
	}
	render () {
		let { callBack } = this.props;
		let { selectIndex } = this.state;

		return (
			<View style={styles.bombOuter}>
				<View style={styles.bombBody}>
					<View style={styles.eacharHead}>
						<Text onPress={() => { this._tabFn(0) }} style={[styles.eacharItem, selectIndex == 0 ? styles.eacharItemTe : null]}>周</Text>
						<Text onPress={() => { this._tabFn(1) }} style={[styles.eacharItem, selectIndex == 1 ? styles.eacharItemTe : null]}>月</Text>
						<Text onPress={() => { this._tabFn(2) }} style={[styles.eacharItem, selectIndex == 2 ? styles.eacharItemTe : null]}>季</Text>
						<Text onPress={() => { this._tabFn(3) }} style={[styles.eacharItem, selectIndex == 3 ? styles.eacharItemTe : null]}>年</Text>
					</View>
					<View style={styles.eacharBody}></View>
				</View>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	bombOuter: {
		width: 300 * scale,
	},
	bombBody: {
		width: 300 * scale,
		height: 250 * scale,
		paddingBottom: 10 * scale,
		backgroundColor: style.color.white,
		borderRadius: 13 * scale
	},
	eacharHead: {
		marginTop: 11 * scale,
		flexDirection: 'row',
		justifyContent: 'space-around',
		alignItems: 'center',
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.gray,
	},
	eacharBody: {

	},
	eacharItem: {
		fontSize: 13 * scale,
		color: style.color.darkGray,
		paddingLeft: 20 * scale,
		paddingRight: 20 * scale,
		height: 38 * scale,
		lineHeight: 38 * scale,
	},
	eacharItemTe: {
		borderBottomWidth: 2 * scale,
		borderStyle: 'solid',
		color: '#222',
		borderBottomColor: style.color.themeColor,
	},
	closeImg: {
		height: 44 * scale,
		width: 44 * scale,
		marginTop: 46 * scale
	},
	closeImgBox: {
		width: '100%',
		flexDirection: 'row',
		justifyContent: 'center',
	}
})